<template>
    <view class="swap-form-page page--column">
        <van-tabs :active="active" @change="onChange" sticky :title-active-color="'#DB187C'">
            <van-tab :name="1" title="待确认"></van-tab>
            <van-tab :name="2" title="已完成"></van-tab>
            <van-tab :name="3" title="已取消"></van-tab>
        </van-tabs>
        <view class="col-main swap-form-page-main">
            <list-page ref="reListPage" :config="page.config" :form="page.form">
                <template v-slot="{ listData }">
                    <view class="swap-form-page-item" :key="idx" v-for="(item, idx) in listData">
                        <view class="item-title">
                            <view class="i-sn">
                                <view></view>调换{{ item.type === 1 ? "进货" : "出货" }}
                            </view>
                            <view class="i-status" :style="{ color: swapFormColor[item.status - 1] }">
                                {{ swapFormStatus[item.status - 1] }}</view>
                        </view>

                        <view class="swap-form-page-i-item">
                            <text>{{item.type === 1 ?'出货店主':'进货店主'}} </text>
                            <text>{{ item._raw.swapDistributorName }}/{{item._raw.swapDistributorMobile}}</text>
                        </view>
                        <view class="swap-form-page-i-item">
                            <text>{{item.type === 1 ?'进货店主':'出货店主'}} </text>
                            <text>{{ item._raw.operatorName }}</text>
                        </view>
                        <view class="swap-form-page-i-item">
                            <text>调换数量</text>
                            <text>{{ item._raw.quantity }}</text>
                        </view>
                        <view class="swap-form-page-i-item">
                            <text>调换时间</text>
                            <text>{{ item._raw.createTime }}</text>
                        </view>

                        <view class="button">
                            <view class="b-item"
                                @tap="nav(`/subpackage/order/pages/shop-swap-form/_id?id=${item._raw.id}`)">
                                订单详情</view>
                        </view>
                    </view>
                </template>
            </list-page>
        </view>
    </view>
</template>

<script>
    import listPage from "@/components/list-page";
    export default {
        components: {
            listPage,
        },
        data() {
            return {
                page: {
                    config: {
                        entity: "ShopSwapForm",
                        action: "swapFormPage",
                        enablePull: true,
                    },
                    form: {
                        query: {
                            status: "1",
                        },
                    },
                },
                swapFormStatus: ["待确认", "已完成", "已取消"],
                swapFormColor: ["#DB187C", "#1D66FD", "FF2A00"],
            };
        },
        onShow() {
            this.$refs.reListPage.fresh();
        },
        methods: {
            onChange(e) {
                const {
                    name
                } = e.detail;
                this.page.form.query.status = `${name}`;
            },
        },
    };
</script>
<style lang="less">
    page {
        overflow: hidden;
        background-color: #f7f7f7;

        .swap-form-page {
            .swap-form-page-main {
                width: 100%;
                height: 100vh;

                .swap-form-page-item {
                    width: 690rpx;
                    margin: 30rpx 30rpx 0;
                    background: #ffffff;
                    border-radius: 20rpx;
                    box-sizing: border-box;

                    >view {
                        padding: 0 20rpx;
                    }

                    .item-title {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        height: 100rpx;
                        font-size: 32rpx;

                        .i-sn {
                            display: flex;
                            align-items: center;
                            font-weight: bold;

                            view {
                                width: 6rpx;
                                height: 36rpx;
                                margin-right: 11rpx;
                                background: #db187c;
                                border-radius: 3rpx;
                            }
                        }

                        .i-status {
                            color: #db187c;
                        }
                    }

                    .swap-form-page-i-item {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 90rpx;
                        font-size: 30rpx;
                        color: #333;

                        text:first-child {
                            color: #666;
                        }
                    }

                    .button {
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        height: 99rpx;
                        border-top: 1rpx solid #f4f4f4;

                        .b-item {
                            width: 180rpx;
                            height: 60rpx;
                            margin-left: 15rpx;
                            background: #fff;
                            border-radius: 30rpx;
                            font-size: 30rpx;
                            text-align: center;
                            line-height: 60rpx;
                            box-shadow: 0 0 0 1rpx #db187c;
                            color: #db187c;
                        }
                    }
                }
            }
        }
    }
</style>